{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

{% import 'components/form/basic_inputs_macros.html.twig' as inputs %}

{% if preferences|length > 0 %}
    <div class="m-3" id="displayprefences-setup">
        {% if massiveactionparams['specific_actions']|length > 0 %}
            <form id="massDisplayPreference{{ rand }}" method="get" action="{{ path('front/massiveaction.php') }}"
                data-search-itemtype="DisplayPreference" data-submit-once>
                <div class="d-flex ms-4">
                    {% do call('Html::showMassiveActions', [massiveactionparams]) %}
        {% endif %}

                    <a role="button" class="btn btn-sm btn-ghost-secondary" id="select-all-itemtypes">
                        <i class="ti ti-copy-check"></i>
                        <span>{{ __('Select/unselect all') }}</span>
                    </a>

                    <input type="text" placeholder="{{ _x('button', 'Search') }}" class="ms-auto" id="search-itemtype" />
                </div>
                {{ inputs.hidden('users_id', users_id, {
                    'data-glpicore-ma-tags': 'common'
                }) }}
                <div class="display-prefs-list row g-2 mt-1">
                    {% for pref in preferences %}
                        {% set name = pref['itemtype']|itemtype_name(1)|default(pref['itemtype']) %}
                        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 displayed-itemtype">
                            <div class="bg-gray-300 border border-gray-200 p-3 rounded-2 d-flex">
                                {% if massiveactionparams['specific_actions']|length > 0 %}
                                    <span class="me-2">
                                        {% do call('Html::showMassiveActionCheckBox', ['DisplayPreference', pref['itemtype']]) %}
                                    </span>
                                {% endif %}
                                <button type="button" class="btn btn-ghost-secondary p-0 btn-itemtype-pref overflow-hidden" data-itemtype="{{ pref['itemtype'] }}" title="{{ name }}">
                                    <i class="{{ pref['itemtype']|itemtype_icon }} me-1"></i>
                                    <span class="text-truncate">
                                        {{ name }}
                                    </span>
                                </button>
                            </div>
                        </div>
                    {% endfor %}
                </div>
        {% if massiveactionparams['specific_actions']|length > 0 %}
                <div class="ms-4 mt-2">
                    {% do call('Html::showMassiveActions', [massiveactionparams|merge({
                        'ontop': false
                    })]) %}
                </div>
            </form>
        {% endif %}
    </div>
    <template id="displaypreference_modal_template{{ rand }}">
        {{ include('components/search/displaypreference_modal.html.twig', {
            rand: rand,
            itemtype: '__VALUE__',
        }) }}
    </template>
    <script>
        $(() => {
            $('.display-prefs-list button.btn-itemtype-pref').on('click', (e) => {
                const itemtype = $(e.currentTarget).attr('data-itemtype');
                const itemtype_name = $(e.currentTarget).text();
                $('#displayprefence_modal{{ rand }}').remove();
                const modal = $($('#displaypreference_modal_template{{ rand }}').html());
                const default_src = modal.find('iframe').attr('src');
                const forced_tab = "{{ users_id > 0 ? 'DisplayPreference$2' : 'DisplayPreference$1' }}"
                const replacement = `${itemtype}&forcetab=${forced_tab}&no_switch=1`;
                modal.find('iframe').attr('src', default_src.replace('__VALUE__', replacement));
                modal.find('.modal-header h4').text(modal.find('.modal-header h4').text() + ' - ' + itemtype_name);
                modal.appendTo('body').modal('show');
            });

            // filter the list of itemtype
            let delay_timer = null;
            $('#search-itemtype').on('input', function() {
                const search = $(this).val().toLowerCase();

                // delay the search to avoid flickering
                clearTimeout(delay_timer);
                delay_timer = setTimeout(function() {
                    $('[data-itemtype]').each(function() {
                        const itemtype_search = $(this).html().toLowerCase();
                        if (itemtype_search.indexOf(search) === -1) {
                            $(this).closest('.displayed-itemtype').addClass('d-none');
                        } else {
                            $(this).closest('.displayed-itemtype').removeClass('d-none');
                        }
                    });
                }, 250);
            });

            // prevent Enter key to submit the form in search input field
            $('#search-itemtype').on('keypress', function(e) {
                if (e.originalEvent.key === 'Enter') {
                    e.preventDefault();
                }
            });

            // (un)toggle all capacities button
            $('#select-all-itemtypes').on('click', function() {
                var $checkboxes = $('#displayprefences-setup input[type=checkbox]');
                var $checkedCheckboxes = $checkboxes.filter(':checked');

                if ($checkedCheckboxes.length === $checkboxes.length) {
                    $checkboxes.prop('checked', false);
                } else {
                    $checkboxes.prop('checked', true);
                }

                $checkboxes.trigger('change');
            });
        });
    </script>
{% else %}
    <div class="alert alert-info">
        {{ __('No results found') }}
    </div>
{% endif %}
